<div class="min-h-screen bg-gray-100 block">
  <!-- TO bootstrap 3 + media -->
  <app-monitor-header></app-monitor-header>
  <main class="container mx-auto px-4 pb-8 pt-4">
    <div class="flex mdr:flex-col">
      <div class="aside1">
        <aside class="card sticky top-[20px] md:mr-4 md:w-48">
          <nav class="">
            <ul class="flex md:flex-col md:space-y-2 mdr:overflow-x-scroll">
              @for (item of aside1; track item.value){
                <li>
                  <a [href]="'#' + item.value"
                    class="hover-with-theme block rounded px-4 py-2 text-gray-600 hover:bg-blue-100 mdr:w-max mdr:text-sm">
                    {{ item.value }}
                  </a>
                </li>
              }
            </ul>
          </nav>
        </aside>
      </div>
      <div class="flex-1">
        <div class="card mb-4">
          <!-- <Tab /> -->
          <app-sn-tab></app-sn-tab>
        </div>
        <div class="space-y-4">
          @for (i of articles; track i.value){
            <div class="card">
              <h2 class="hover-with-theme mb-2 w-max text-xl font-semibold">
                文章标题 {{ i.value }}
              </h2>
              <p class="text-gray-600">这里是文章的简短描述...</p>
              <div class="mt-2 text-sm text-gray-400">
                <span class="hover-with-theme hover:underline">作者</span>
                &nbsp;
                <span>• 15k 阅读 • 173 点赞</span>
              </div>
            </div>
          }
        </div>
      </div>
      <div class="aside2">
        <aside class="sticky top-[20px] ml-4 w-64 lgr:hidden">
          <div class="card mb-4">
            <h3 class="mb-2 font-semibold">连续签到</h3>
            <p class="text-sm text-gray-600">您已经打卡 1 天</p>
            <button class="mt-2 rounded-[8px] bg-blue-100 px-4 py-1 text-sm text-blue-600">
              已签到
            </button>
          </div>
          <div class="card">
            <h3 class="mb-2 font-semibold">文章榜</h3>
            <ul class="space-y-2">
              @for (i of titles; track i.value){
                <li class="hover-with-theme flex w-max items-center">
                  <span class="mr-2 text-gray-500">{{ i.value }}</span>
                  <span class="truncate text-sm">热门文章标题 {{ i.value }}</span>
                </li>
              }
            </ul>
          </div>
        </aside>
      </div>
    </div>
  </main>
</div>
